import React, {Component} from "react";
import {AppRegistry, StyleSheet, Text, View, Image, Dimensions} from "react-native";
import Swiper from "react-native-swiper";

let winWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
    backView: {
        alignItems: 'center',
        justifyContent: 'center',
        width: winWidth,
        height: 0.94 * winWidth-60,
    },
    carouselView: {
        height: 200,
        width: winWidth * 0.8,
        backgroundColor: 'white',
        borderRadius: 8,
        opacity: 0.5 , //透明度
        alignItems: 'center',
        top:-30
    }
});

var views = [
    (<View key={1} style={styles.backView}>
        <View style={styles.carouselView}>
            <Text>能量</Text>
        </View>
    </View>),
    (<View key={2} style={styles.backView}>
        <View style={styles.carouselView}>
            <Text>水</Text>
        </View>
    </View>),
    (<View key={3} style={styles.backView}>
        <View style={styles.carouselView}>
            <Text>电</Text>
        </View>
    </View>),
    (<View key={4} style={styles.backView}>
        <View style={styles.carouselView}>
            <Text>气</Text>
        </View>
    </View>),
];
export default class Carousel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            swiperShow: false,
        };
    }

    componentDidMount() {
        this.timer = setTimeout(() => {
            this.setState({
                swiperShow: true
            });
        }, 0)
    }

    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    }

    render() {
        if (this.state.swiperShow) {
            return (
                <Swiper height={200} showsButtons={false} autoplay={false}
                >
                    {views}
                </Swiper>

            );
        } else {
            return (
                <View>
                    <Text>loading</Text>
                </View>
            )
        }
    }

    // renderImg() {
    //     var imageViews = [];
    //     for (var i = 0; i < images.length; i++) {
    //         imageViews.push(
    //             <CachedImage
    //                 key={i}
    //                 style={{flex: 1}}
    //                 source={{uri: images[i]}}
    //             />
    //         );
    //     }
    //     return imageViews;
    // }
}
